<!--
验证码
调用方法
导入 import ValidateCodeView from "./widgets/ValidateCodeView"
添加到组件 components: {ValidateCodeView},
页面任意位置引用 <validateCodeView ref="AProductAddEdit"></validateCodeView>
方法调用 ValidateCodeView.methods.showModal();
-->
<template>
  <Modal
    v-model="modalCode.isShow"
    title="请输入验证码"
    :mask-closable="false"
  >
  <div style="width:100%;text-align: center">
    <div style="font-size: 1.5em;font-weight: 600">我们已经给您手机{{phoneNum}}发送一条短信</div>
    <div style="margin-top: 10px">
    <span><Input v-model="codeParam.validateCode" placeholder="验证码"  class="modal_form_input" ></Input></span>
    <span span="8"><Button type="primary" :loading="codeParam.isSending" @click="sendCode" :disabled="codeParam.sendDisabled">{{codeParam.sendCodeMsg}}</Button></span>
  </div>
  </div>
    <div slot="footer" style="text-align: right">
      <Button size="large" class="action_btn"
              @click="modalCode.isShow = false" > 取消
      </Button>
      <Button type="primary" size="large" class="action_btn"
              @click="validatingCode" style="margin-left: 10px">确定
      </Button>
    </div>
  </Modal>
</template>

<script>
  import tiyData from "./code/code_data"

  import {
    showHideModal,
    validateCode,
    sendValidateCode
  } from  "./code/code_funs"
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
    export default {
      components: {ICol},
      data(){
        return {
          codeParam:tiyData.tParam.codeParam,
          modalCode:tiyData.status.modalCode,

        }
      },
      props:{
        phoneNum:{
          type:String,
          default:""
        },
        userId:{
          type:String,
          default:""
        },
      },
      watch:{
        "modalCode.isShow":{
          handler(newName, oldName){
            if(newName == true){
              this.sendCode();
            }
          },
          deep: true,
          immediate: true
        }
      },
      methods: {
        showModal(){
          showHideModal(this,tiyData,true)
        },
        hide(){
          showHideModal(this,tiyData,false)
        },
        validatingCode(){
          validateCode(this,tiyData)
        },
        sendCode(){
          sendValidateCode(this,tiyData)
        },
      },
      created(){
        this.codeParam.sendCodeMsg = '发送验证码';
      },
    }
</script>

<!--css样式-->
<style lang="less" scoped>
  @import  (once,optional)  "../css/base";

  .modal_form_input {
    width: 100px;
    margin-right: 10px;
  }

</style>
